How to align navbar items in left, center or right?

2023-03-14 21:57| 来源: 网络整理| 查看: 265

Bootstrap Navbar provides attractive headers to the website pages. It is used for styling the website's header. Navbar is generally placed at the top of the web page. It is used for navigation between web pages.

The elements in the navbar are aligned to the left of the navbar by default. Here, we are going to learn how to align elements to left, right, and center in the navbar.

Items in the Default navbar

Bootstrap 5 provides a number of classes used to create a navbar as per our requirements.

The .navbar class is used within element to create a navbar. The .navbar is wrapped with navbar-expand-{sm, md, lg, xl, xxl } for responsive collapsing and color schemes classes. Use the .container class to control the width of the navbar. Use .navbar-brand to add a website, product, or company name. Use .navbar-nav for full-height and lightweight navigation. Use .navbar-toggler to add the collapse the navbar . Use .navbar-item to add items to the navigation. Use .navbar-link to add links within .navbar-item. Use .disable to disable any item link.

In the default navbar, the brand name and the items are aligned to the left side within the navbar.

Bootstrap Navbar Home Course Disabled Output:

Here is the output of the above program.

navbar

Aligning items to left, right, and center within the Navbar

The items within the navbar can be aligned using margin utilities.

The .mx-auto class can be used to align the items to the center of the navbar. The .ms-auto class is used to align items to the right of the navbar. The .me-auto class is used to align items to the left of that navbar. Bootstrap Home Course About us Contacts Disabled Navbar Search Output

Here is the output of the above program where links are aligned to the left, the brand name to the center, and the search field to the right within the navbar.

Conclusion

Hence we can use margin utilities to align the items within the navbar to left, right, or center. You can enhance the look of the navbar by aligning the navbar items at different positions. Bootstrap 5 makes aligning items in the navbar easier.

【本文地址】

公司简介

联系我们